import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-a04',
  templateUrl: './a04.page.html',
  styleUrls: ['./a04.page.scss'],
})
export class A04Page implements OnInit {

  constructor(public navCtrl: NavController) {
  }

  cardHeader: HTMLIonCardHeaderElement;
  cardContent: HTMLIonContentElement;
  card: HTMLIonCardElement;

  ionViewDidLoad() {
    this.cardHeader = <HTMLIonCardHeaderElement>document.getElementById("cardHeader");
    this.cardContent = <HTMLIonContentElement>document.getElementById("cardContent");
    this.card = <HTMLIonCardElement>document.getElementById("card");
  }

  ngOnInit() {
    this.ionViewDidLoad();
  }
  //JavaScript的写法
  click1() {
    this.card.style.display = "block";
    this.cardHeader.innerHTML = 'JavaScript:类型不明确';

    //JavaScript的命名函数
    function add(x, y) {
      return x + y;
    }
    //JavaScript的匿名函数【Anonymous function】
    var myAdd = function (x, y, z) { return x + y + z; };

    var i = 5, j = 10, k = 10;
    this.cardContent.innerHTML = '<p>' +
      'i + j = ' + add(i, j) + '<br>' +
      'i + j + z = ' + myAdd(i, j, k) + '</p>';
  }

  //TypeScript的写法
  click2() {
    this.card.style.display = "block";
    this.cardHeader.innerHTML = 'TypeScript:类型明确';

    let add = (x: number, y: number) => {
      return x + y;
    }
    let myAdd = (x: number, y: number, z: number) => {
      return x + y + z;
    };

    let i = 5, j = 10, k = 10;
    this.cardContent.innerHTML = `<p>
          i + j = ${add(i, j)}<br>
          i + j + z = ${myAdd(i, j, k)}
      </p>`
  }
}
